<!DOCTYPE html>
<html lang="en" style="">
<head>
<!--shared:custom-meta-->
<base href="">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
/*vfs[]:/css/ui-highlight.css*/
</style>
<script>
let DEBUG = false
DEBUG = true /*debug*/
</script>
<style>
/*file:css/app.css */
/*vfs[]:/css/ui.css*/
/*file:custom.css */
</style>
<!--shared:custom-head-->
<script type="importmap">
{
    "imports": {
        "vue": "../js/vue.mjs",
        "@servicestack/vue": "../js/servicestack-vue.mjs",
        "@servicestack/client": "../js/servicestack-client.mjs",
        "highlight.js": "../js/highlight.mjs",
        "core": "../js/core.mjs",
        "app": "./lib/app.mjs",
        "dtos": "./lib/dtos.mjs"
    }
}
</script>
</head>
<body class="loading noauth">
<!--shared:custom-body-->

<div id="app"></div>

<template id="app-template">
    <div class="flex">
        <sidebar v-if="showSidebar" @hide="showSidebar=false"></sidebar>
        <div class="md:pl-sidebar md:w-sidebar overflow-auto flex flex-col flex-1">
            <div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-white">
                <button type="button" @click="showSidebar=true"
                        class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                    <span class="sr-only">Open sidebar</span>
                    <!---: Heroicon name: outline/menu -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>
            </div>
            <main class="flex-1 overflow-auto">
                <div class="pt-2.5 pb-6">
                    <div class="absolute top-1 right-2 flex z-10">
                        <div v-if="routes.queryHref()" class="flex items-center">
                            <a v-if="routes.queryHref()" title="View in Locode" :href="routes.queryHref()"
                               class="p-1 inline-flex items-center border border-transparent hover:border-gray-400 hover:shadow-sm text-sm rounded bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                <svg class="w-6 h-6 text-gray-600" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                          d="M4 10.4V4a1 1 0 0 1 1-1h5V1h4v2h5a1 1 0 0 1 1 1v6.4l1.086.326a1 1 0 0 1 .682 1.2l-1.516 6.068a4.992 4.992 0 0 1-1.902-.272l1.25-5.352L12 10l-7.6 2.37l1.25 5.351a4.992 4.992 0 0 1-1.902.273l-1.516-6.068a1 1 0 0 1 .682-1.2L4 10.4zm2-.6L12 8l6 1.8V5H6v4.8zM4 20a5.978 5.978 0 0 0 4-1.528A5.978 5.978 0 0 0 12 20a5.978 5.978 0 0 0 4-1.528A5.978 5.978 0 0 0 20 20h2v2h-2a7.963 7.963 0 0 1-4-1.07A7.963 7.963 0 0 1 12 22a7.963 7.963 0 0 1-4-1.07A7.963 7.963 0 0 1 4 22H2v-2h2z"/>
                                </svg>
                            </a>
                        </div>
                        <div v-if="store.plugins.apiKey" class="ml-2 flex items-center">
                            <a class="p-1 inline-flex items-center border border-transparent hover:border-gray-400 hover:shadow-sm text-sm rounded bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                               aria-expanded="false" aria-haspopup="true" v-href="{ dialog:'apikey' }">
                                <svg class="w-6 h-6 text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                       stroke-width="2">
                                        <path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z"/>
                                        <circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/>
                                    </g>
                                </svg>
                            </a>
                        </div>
                        <auth-nav v-if="store.plugins.auth" :auth="store.auth" :logout="store.logout"></auth-nav>
                    </div>
                </div>
                <div v-if="store.op">
                    <div>
                        <div class="fixed w-full md:w-sidebar border-b border-gray-200 bg-white top-sm-nav"
                             style="padding-top:2.5px">
                            <nav class="flex max-w-screen-sm lg:max-w-screen-md" aria-label="Tabs">
                                <a v-for="(tab,name) in store.opTabs" v-href="{op:routes.op, tab, $clear:true}" :title="name"
                                   :class="[tab == routes.tab ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300','w-1/3 py-5 px-1 text-center border-b-2 font-medium text-sm overflow-hidden']">
                                    {{name}}
                                </a>
                            </nav>
                        </div>
                        <div class="fixed w-body md:w-body top-top-nav h-top-nav overflow-auto z-10">
                            <api-form v-if="routes.tab === ''"></api-form>
                            <api-details v-else-if="routes.tab === 'details'" class="flex"></api-details>
                            <api-code v-else-if="routes.tab === 'code'"></api-code>
                        </div>
                    </div>
                </div>
                <welcome v-else class="fixed w-body md:w-body top-top-nav h-top-nav overflow-auto z-10"></welcome>
        </div>
        </main>
    </div>
    <api-key-dialog v-if="routes.dialog === 'apikey'" :title="store.plugins.apiKey?.label" class="z-40"
                    @done="routes.to({ dialog:'' })"></api-key-dialog>
    </div>
</template>

<script>
function loadAuth(auth) {
    window.AUTH = !auth || auth.responseStatus ? null : auth
}

/*gateway:window.Server=MetadataApp({view:'locode',jsconfig:'eccn,inv:false'})?*/
</script>
<script src="../auth?callback=loadAuth&jsconfig=eccn"></script>

<script type="module">
import {useMetadata, useAuth} from "@servicestack/vue"
import {setFavIcon, setBodyClass} from "core"
import {humanify} from "@servicestack/client"

const {loadMetadata} = useMetadata()
const {signIn, toAuth} = useAuth()

globalThis.AUTH = toAuth(globalThis.AUTH)
loadMetadata()
signIn(globalThis.AUTH)
setBodyClass({auth: globalThis.AUTH})

document.title = globalThis.Server.app.serviceName
setFavIcon(globalThis.Server.ui.brandIcon, globalThis.Server.app.baseUrl + '/metadata/svg/servicestack.datauri')

window.config = {
    sidebar: {
        /** @param {MetadataOperationType} op */
        label(op) {
            return humanify(op.dataModel.name)
        }
    }
}
</script>

<script>
    /*files:js/*.js */
</script>
<!--components:Brand,CopyIcon,CopyLine,Code,ApiKeyDialog-->
<!--module:components/*.mjs-->
<!--module:docs/*.mjs-->
<!--file:custom.html-->

<script type="module">
import {ref, computed, nextTick, inject, onMounted} from "vue"
import ServiceStackVue from "@servicestack/vue"
import {$1, $$} from "@servicestack/client"
import {app} from "app"

const App = {
    template: $1('#app-template'),
    setup(props) {
        const store = inject('store')
        const routes = inject('routes')
        const server = inject('server')

        const showSidebar = ref(true)

        // let sub = null
        // let lastOp = null
        // onMounted(() => {
        //     sub = app.events.subscribe('route:nav', args => {
        //     })
        // })

        return {store, routes, showSidebar}
    }
}

Object.keys(app.Components).forEach(name => {
    ServiceStackVue.component(name, app.Components[name])
})
app.build(App).mount('#app')
app.start()

function styleProperty(name) {
    return document.documentElement.style.getPropertyValue(name)
}

function setStyleProperty(props) {
    let style = document.documentElement.style
    Object.keys(props).forEach(name => style.setProperty(name, props[name]))
}

let sidebarWidth = styleProperty('--sidebar-width')

nextTick(() => {
    document.body.classList.remove('loading')
    let max = Math.max(...Array.from($$('#sidebar .nav-item')).map(el => el.clientWidth))
    if (max > (240 - 75)) {
        sidebarWidth = (max + 75) + 'px'
        setStyleProperty({'--sidebar-width': sidebarWidth})
    }
})
</script>
<script>
/*file:custom.js */
</script>

<!--shared:custom-end-->
</body>
</html>
